<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=<!-- device-width -->, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak]{
      opacity: 0;
    }
  </style>
</head>
<body>
  <!-- 指令都是   v-xxx 的行内属性     -->
  <div id="app">
    <h1 v-cloak v-once  style='color:red'>
      {{name}}
    </h1>
    <h2 v-text='name'  class='box' :class='name'>
      你好用户
    </h2>
    <div v-text='str' :class={box:true,box2:false,box3:true}></div>
    <div v-html='str' :style="{color:'red',fontSize:'30px'}"></div>


    <input type="text" v-model='name'>
    <textarea v-model=str></textarea>
    <template v-if='name.length > 5'>
      <h2 >你好</h2>
      <h2 >你好</h2>
      <h2 >你好</h2>
      <h2 >你好</h2>
      <h2 >你好</h2>
      <h2 >你好</h2>
    </template>
    
    <h3 v-else>我好</h3>
    <h3 v-show='name.length > 5'>我好</h3>
    <h4 v-show='!(name.length > 5)'>我好</h4>

    <h2 v-for='(qqq,i) of ary'  v-if='i > 3' :key='i'>
      <!-- 理想的key应该数据的唯一的一个ID    没有的时候会 我们可以使用 索引； 缺点 有时会导致元素不更新服用了某老元素） -->
      <!-- qqq 和 i  都是自定义的变量名   只能用在当前标签上 及 标签内部 -->
      <!--   in  for  in ;;     of    for of  只要是可迭代的  都可以用of      -->
      索引是{{i}}; 只是{{qqq}}
    </h2>
    <img v-bind:src="url" :alt="name">

    <ul v-pre>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

<!-- 
  虚拟DOM 就是用 JS对象去模拟真实DOM
  <div class='qqqq'>666</div>
    {
      tag:'div',
      props:{
        class:'111'
      }
      children:{

      },
      text：666
    }

 -->

<!-- 
  v-model= xxx   主要应用再表单元素上 或者 自定义组件上
  v-text= xxx    v-text优势  是 死活不会显示出小胡子的； {{ }} 再初始渲染的时候 有可能会让用户看到小胡子
                  v-text 等同于 {{}}  innerText
  v-html=xxx   等同于原生的  innerHTML; 永不 用在用户提交的内容上


  v-cloak   专门用来解决小胡子的显示问题的,需要配合css使用 ；原理就是 当前vue编译完成之前， 元素上会带有v-cloak
            行内属性， css样式就会起作用，当vue编译完成之后  会把这个指令删除，没有这个行内属性那么对应的css
            也就不起作用了；
  v-once    有这个指令的标签 vue只会编译一次      
  v-pre     优化性的指令，有这个指令的标签 vue不会编译这部分

  v-if    直接控制元素或者组件 加不加载  v-else v-else-if  有比较大的切换开销
  v-show  控制元素或者组件的 显示或者隐藏（display属性）    有比较大的初始加载开销 el.style.display= xxx ? :none

  v-for   循环展示标签的一个指令  可任意用来循环 数组 对象 数字 字符串;
          不建议 跟 v-if同时使用 ； 优先级高于 v-if ；
  
  v-bind 专门用来处理行内属性的一个指令  ; 简写是个 :     
        vue 对 class 和 style这两个属性专门做了加强
        :class={box:true,box2:false,box3:true} 属性名是要添加的类名 属性值是用来控制要不要加上这个类名
        :class=['box','box2','box3']  把数组中的所有字符串当作类名加到元素上
        :style={color:'red',fontSize:'30px'}
-->
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      name:666,
      str:`<a onclick='alert("xss")'>链接<\/ a>`,
      ary:[100,2000,3000,4000,5000]  ,
      url:'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2089849344,2745774601&fm=85&app=92&f=JPEG?w=121&h=75&s=A6165D833305294F6DF52C1F0300C0C2'
    }
  });
</script>